<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
</style>
<body>
<select id="layout">
  <option value="dendrogram">系统树</option>
  <option value="compactBox">紧凑树</option>
  <option value="mindmap">脑图布局</option>
</select>
<div id="mountNode"></div>
<script src="assets/hierarchy.js"></script>
<script src="../build/g6.js"></script>
<script>
  let currentLayout = 'dendrogram';
  const layouts = {
    dendrogram: function(data) {
      return Hierarchy.dendrogram(data, {
        direction: 'LR', // H / V / LR / RL / TB / BT
        nodeSep: 50,
        rankSep: 100
      })},
    compactBox: function(data) {
      return Hierarchy.compactBox(data, {
        direction: 'LR',
        getId(d) { return d.id; },
        getHeight() { return 16 },
        getWidth() { return 16 },
        getVGap() { return 50 },
        getHGap() { return 50 }
      });
    },
    mindmap: function(data) {
      return Hierarchy.mindmap(data, {
        direction: 'H',
        getHeight() { return 16; },
        getWidth() { return 16; },
        getVGap() { return 50; },
        getHGap() { return 50; }
      });
    }
  };
  const graph = new G6.TreeGraph({
    container: 'mountNode',
    width: 1000,
    height: 800,
    pixelRatio: 2,
    //renderer: 'svg',
    animate: false,
    modes: {
      default: ['collapse-expand', 'drag-canvas']
    },
    defaultNode: {
      size: 16,
      anchorPoints: [[0,0.5], [1,0.5]]
    },
    defaultEdge: {
      shape: 'cubic-horizontal'
    },
    nodeStyle: {
      default: {
        fill: '#40a9ff',
        stroke: '#096dd9'
      }
    },
    edgeStyle: {
      default: {
        stroke: '#A3B1BF'
      }
    },
    layout: layouts.dendrogram
  });
  let nodeCount = 0;
  function generateChildren(node, count, level) {
    //const count = parseInt(Math.random() * maxCount);
    const rst = [];
    for (var i = 0; i < count; i++) {
      nodeCount++;
      rst.push({
        id: node.id + i,
        label: node.id + '-' + i
      });
    }
    if (level <= 3) {
      rst.forEach(subNode => {
        generateChildren(subNode, count, level + 1)
      });
    }
    node.children = rst;
  }
  const data = {
    isRoot: true,
    id: '0',
    style: {
      fill: 'red'
    }
  };
  generateChildren(data, 6, 0);

  graph.data(data);
  graph.render();
  graph.on('beforepaint', () => {
    let hideCount = 0;
    const nodes = graph.getNodes();
    nodes.forEach(node => {
      const model = node.get('model');
      const point = graph.getCanvasByPoint(model.x, model.y);
      const nodeGroup = node.get('group');
      if (point.x < 0 || point.y < 0 || point.x > 1000 || point.y > 800) {
        hideCount++;
        node.hide();
      } else {
        node.show();
      }
    });

    const edges = graph.getEdges();
    edges.forEach(edge => {
      const sourceNode = edge.get('sourceNode');
      const targetNode = edge.get('targetNode');
      if (!sourceNode.get('visible') && !targetNode.get('visible')) {
        edge.hide();
      } else {
        edge.show();
      }
    }) 
    //console.log(hideCount);
  });
  graph.fitView();
  console.log(nodeCount);
</script>
</body>
</html>
